{% extends "user/base.html" %}

{%block head_js%}
    {{super()}}

    <script>
    $(function() {
        $("#query").keypress(function(e) {
            var key = e.which;
            if (key == 13) {
                query_user();
            }
        });
    });
    </script>

{%endblock%}

{% block container_outer %}
<div id="container" class="container-fluid common-margin"  style="margin-right: auto;margin-left: auto; width: 524px;">
	<div class="row">
		<div class="col-md-12" style="padding: 0">

			<div style="margin: 0 auto; width: 524px;">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">通讯录</h3>
					</div>

					<div class="form-inline mb20 panel-margin" role="form">
						<div class="form-group">
							<input type="text" value="{{query_term}}" class="form-control" id="query"
								   placeholder="name or email">
						</div>
						<button type="button" onclick="query_user();" class="btn btn-default">
							<span class="glyphicon glyphicon-search"></span>
							查询
						</button>

						{%if g.user.is_admin() or g.user.is_root()%}
						<a href="/user/create" class="btn btn-default pull-right">
							<span class="glyphicon glyphicon-plus"></span>
							添加
						</a>
						{%endif%}

					</div>

					<div class="us panel-margin">
						{%for user in users%}
						<div class="u">
							{%if g.user.is_root() %}
							<div class="pull-right">
								{%if user.is_root()%}
								root
								{%elif user.is_admin()%}
								<input type="checkbox" checked="checked" onclick="set_role('{{user.id}}', this);">
								管理员
								{%else%}
								<input type="checkbox" onclick="set_role('{{user.id}}', this);">
								管理员
								{%endif%}
							</div>
							{%endif%}

							登录账号：{{user.name}}， 中文名：{{user.cnname}}
							<a href="/user/about/{{user.id}}" style="text-decoration:none;">
								<span class="glyphicon glyphicon-qrcode"></span>
							</a>
							<br>
							邮箱: {{user.email}}<br>
							手机: {{user.phone}}<br>
							IM：{{user.im}}， QQ：{{user.qq}}

							{%if g.user.is_root() or g.user.is_admin() %}
							<div class="pull-right">
								<a href="/admin/user/{{user.id}}/edit" class="orange" style="text-decoration:none;">
									<span class="glyphicon glyphicon-edit"></span>
								</a>
								<span class="cut-line">¦</span>
								<a href="javascript:delete_user('{{user.id}}');" class="orange" style="text-decoration:none;">
									<span class="glyphicon glyphicon-trash"></span>
								</a>
							</div>
							{%endif%}

							<hr>
						</div>
						{%endfor%}
					</div>
				</div>


			</div>

		</div>
	</div>
</div>
{%endblock%}
